<template>
  <div class="">
      <p>
        <h1>按钮</h1><br>
        <Button type="primary">蓝色直角按钮</Button><br>
        <Button type="warning">警告按钮</Button><br>
        <Button type="primary" class="btn-hover">直角按钮 悬停</Button><br>
        <Button type="primary" disabled>不可点击</Button><br>
        <Button type="primary" shape="circle">圆角按钮</Button><br>
        <Button type="primary" shape="circle" disabled>圆角按钮1</Button><br>
        <Button type="primary" shape="circle" icon="checkmark-round"></Button><br>
        <Button type="primary" shape="circle" icon="close-round"></Button><br>
        <Button type="primary" shape="circle" icon="plus-round"></Button><br>
        <Button type="primary" shape="circle" icon="minus-round"></Button><br>
      </p>

    <p>
      <p>字体的大小</p>
      <div class="font-12">font-12</div>
      <div class="font-14">font-14</div>
      <div class="font-16">font-16</div>
      <div class="font-18">font-18</div>

    </p>
    <p>
      <p>复选框</p>
        <Checkbox v-model="single1">Checkbox</Checkbox>
        <Checkbox v-model="single2" disabled>Checkbox</Checkbox>
        <Checkbox v-model="single3" disabled>Checkbox</Checkbox>
    </p>
    <p>
      <h1>确认对话框的使用</h1>
    <Button type="primary" @click="showConfirmModal">显示确认对话框</Button>
      <confirm-modal-componet
        :modalTitle="modalSetting.titleHtml"
        :modalSwitch="modalSetting.isOpenModal"
        okBtnText="确定测试"
        cancelBtnText="取消测试"
        :isDestoryByHide="modalSetting.isDestoryByHide"
        :modalWidth="modalSetting.modalWidth"
        :userStyle="modalSetting.userStyle"
        :maskClosable="modalSetting.maskClosable"
        @on-ok-modal="okAction"
        @on-cancel-modal="cancelAction"
      >
        <!--文本内容-->
        <h1>你大爷</h1>
        <CheckboxGroup >
          <Checkbox label="twitter">
            <Icon type="social-twitter"></Icon>
            <span>Twitter</span>
          </Checkbox>
          <Checkbox label="facebook">
            <Icon type="social-facebook"></Icon>
            <span>Facebook</span>
          </Checkbox>
          <Checkbox label="github">
            <Icon type="social-github"></Icon>
            <span>Github</span>
          </Checkbox>
          <Checkbox label="snapchat">
            <Icon type="social-snapchat"></Icon>
            <span>Snapchat</span>
          </Checkbox>
        </CheckboxGroup>
        <!--提示信息-->
        <!--<div slot="tips">-->
          <!--<h3>你输入的密码不正确</h3>-->
        <!--</div>-->
      </confirm-modal-componet>
    </p>


    <p>
      <h1>查询表单</h1>
      <search-input-componet
        @search-onenter-action="searchInputAction"
        :value="searchValue"
      ></search-input-componet>
    </p>
    <p></p>
    <p></p>


  </div>
</template>
<style lang="scss">
  .btn-hover{
    opacity: 0.9;
  }

  .font-12{ font-size: 12px; }
  .font-14{ font-size: 14px; }
  .font-16{ font-size: 16px; }
  .font-18{ font-size: 18px; }
</style>
<script>
  // 确认对话框
  import  confirmModalComponet from "../../components/modal/confirmModalComponet.vue"
  // 查询 表单
  import  searchInputComponet from "../../components/form/searchInputComponet.vue"

  export default{
    mounted: function(){
    },
    data: function () {
      return {

          single1: false,
          single2: false,
          single3: false,
        searchValue: "",

        modalSetting:{
          // 是否显示模态框
          isOpenModal: false,
          // 标题的属性
          titleHtml: "<h3>我<span style='color: red'>是标</span>题</h3>",
          // 关闭模态框之后，再打开是否重置之前的操作（即销毁之前的记录）
          isDestoryByHide: false,
          // 确定按钮的文本
          okBtnText:"确定么",
          // 取消按钮的文本
          cancelBtnText:"取消吧",
          // 是否允许点击遮罩层关闭
          maskClosable:false,
          // 模态框的宽度
          modalWidth: 400,
          // 用户自定义style样式
          userStyle:{
            // 距离顶部的高度
            top:"500px"
          }
        },

      }
    },
    methods: {
      showConfirmModal: function(){
        // 让vue对象监听到 对象值的变化
        this.$set(this.modalSetting,"isOpenModal",true)
      },
      // 确定事件
      "okAction": function (eventObj){
        console.dir(eventObj);
        this.$set(this.modalSetting,"isOpenModal",false)
      },
      // 取消事件
      "cancelAction": function (eventObj){
        console.dir(eventObj);
        this.$set(this.modalSetting,"isOpenModal",false)
      },
      // 取消事件
      "searchInputAction": function (eventObj){
        alert("searchInputAction");
        console.dir(eventObj);
        this.searchValue = "黄彪"
      },
    },

    components:{
      confirmModalComponet,
      searchInputComponet,
    }
  }
</script>



